<template>
    <component :is="cmpnt.cmpnt" :key="cmpnt._id" v-bind="cmpnt.props" v-on="cmpnt.events"
        v-model="data[cmpnt.valueKey]" :class="[((parent || {}).childrenClass || {})[cmpnt.catgory]]"
        :style="cmpnt.props.style" :text="cmpnt.text">
        <template v-if="cmpnt.children && cmpnt.children.length > 0">
            <draggable v-if="store.conf.editable && cmpnt.drag" handler=".move" v-model="cmpnt.children"
                ghost-class="drag-ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
                :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50">
                <transition-group>
                    <cmpnt-renders :cmpnts="cmpnt.children" :data="data" :parent="cmpnt">
                    </cmpnt-renders>
                </transition-group>
            </draggable>
            <cmpnt-renders v-else :cmpnts="cmpnt.children" :data="data" :parent="cmpnt">
            </cmpnt-renders>
        </template>
        <!-- 插槽支持 -->
        <template v-for="(value, name) in cmpnt.slot" :key="name" v-slot:[name]="scope">
            <cmpnt-renders :cmpnts="value" :data="scope" :parent="cmpnt">
            </cmpnt-renders>
        </template>
    </component>

</template>
<script setup>
import cmpntRenders from "./cmpntRenders.vue";
import { VueDraggableNext as Draggable } from "vue-draggable-next";
import { computed, defineProps, onMounted } from 'vue'
import { store } from "pkgs/stores"
const props = defineProps({
    cmpnt: {
        type: Object,
    },
    parent: {
        type: Object,
        default: () => { },
    },
    data: {
        type: Object,
        default: () => { },
    },
});
</script>